<template>
    <view id="wrap">
        <c-navBar title="修改密码" class="topBg" isPerch color="#FFFFFF"></c-navBar>

        <view class="taskCont">
            <view style="font-weight: bold;
  font-size: 32rpx;
  color: #000000;">修改密码</view>
            <view style="font-weight: 400;
  font-size: 24rpx;
  color: #666666;margin-top: 16rpx;">请先输入你的旧密码再输入新密码</view>
            <view class="changePassForm">
                <view class="changePassForm_item">
                    <view class="form_item_title"> 原密码 </view>
                    <view class="form_item_inp">
                        <input v-model="passInfo.oldPassword" type="password" placeholder-class="placeholder_class"
                            placeholder="请输入原密码" />
                    </view>
                </view>
                <view class="changePassForm_item">
                    <view class="form_item_title"> 新密码 </view>
                    <view class="form_item_inp">
                        <input v-model="passInfo.newPassword" type="password" placeholder-class="placeholder_class"
                            placeholder="请输入新密码" />
                    </view>
                </view>
                <view class="changePassForm_item">
                    <view class="form_item_title"> 确认密码 </view>
                    <view class="form_item_inp">
                        <input v-model="passInfo.confirmPassword" type="password" placeholder-class="placeholder_class"
                            placeholder="请再次输入新密码" />
                    </view>
                </view>
            </view>
        </view>

        <view class="tabbar_bottom">
            <view class="footer">
                <view @click="setPassWord" class="btn"> 保存 </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            passInfo: {
                oldPassword: '',
                newPassword: '',
                confirmPassword: '',
            },
            userInfo: {}
        }
    },
    methods: {
        /** 保存事件 */
        setPassWord() {
            if (!this.passInfo.oldPassword) {
                return uni.showToast({
                    title: '请输入原密码',
                    icon: 'none',
                    duration: 2000,
                })
            }
            if (!this.passInfo.newPassword) {
                return uni.showToast({
                    title: '请输入新密码',
                    icon: 'none',
                    duration: 2000,
                })
            }
            if (!this.passInfo.confirmPassword) {
                return uni.showToast({
                    title: '请再次输入新密码',
                    icon: 'none',
                    duration: 2000,
                })
            }
            if (this.passInfo.newPassword != this.passInfo.confirmPassword) {
                return uni.showToast({
                    title: '二次输入密码不一致',
                    icon: 'none',
                    duration: 2000,
                })
            }

            if (this.passInfo.oldPassword != this.userInfo.password) {
                return uni.showToast({
                    title: '请输入正确的原密码',
                    icon: 'none',
                    duration: 2000,
                })
            }
            this.userInfo.password = this.passInfo.confirmPassword

            this.$api.update(this.userInfo).then((res) => {
                console.log("res", res)
                if (res.code == 200) {
                    uni.showToast({
                        title: '密码修改成功！请重新登录',
                        icon: 'none',
                        duration: 2000,
                    })
                    setTimeout(() => {
                        uni.removeStorageSync('token')
                        uni.removeStorageSync('user')
                        uni.reLaunch({
                            url: '/pages/tabbar/login',
                        })
                    }, 500)
                } else {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none',
                        duration: 2000,
                    })
                }
            })
        },
        /** 获取个人信息 */
        async getUserInfo() {
            const res = await this.$api.getInfo()
            if (res.code == 200) {

                this.userInfo = res.data
            } else {
                return uni.showToast({
                    title: res.msg,
                    icon: 'none'
                })
            }
        }
    },
    onShow() {
        this.getUserInfo()
    }
}
</script>

<style lang="scss" scoped>
.taskCont {
    margin: 20rpx 30rpx 46rpx 30rpx;

    .task_title1 {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 32rpx;
        color: #000000;
        margin-bottom: 16rpx;
    }

    .task_title2 {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #666666;
    }

    .changePassForm {
        margin-top: 36rpx;

        .changePassForm_item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1rpx solid #e6e6e6;
            height: 88rpx;
            box-sizing: border-box;

            .form_item_title {
                font-weight: bold;
                color: #1a1a1a;
            }
        }

        .form_item_inp {
            margin-left: 32rpx;
            height: 100%;
            display: flex;
            align-items: center;
            text-align: right;

            /deep/ .placeholder_class {
                font-weight: 400;
                font-size: 24rpx;
                color: #999999;
            }
        }
    }
}

.forgetPass {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    // color: #2d6cb3;
    margin-top: 24rpx;
}

.txtColorR {
    color: #ff8306;
}

.txtColorB {
    color: #2d6cb3;
}

.mt20 {
    margin-top: 20rpx;
}

.tabbar_bottom {
    position: fixed;
    left: 0;
    bottom: 0rpx;
    width: 100%;
    // height: 108rpx;
    background: #ffffff;
    padding-left: 32rpx;
    padding-right: 32rpx;
    padding-bottom: 16rpx;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);
    box-sizing: border-box;
    z-index: 101;

    .footer {
        box-sizing: border-box;

        .btn {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 96rpx;
            border-radius: 12rpx 12rpx 12rpx 12rpx;
            font-weight: bold;
            font-size: 36rpx;
            background: linear-gradient(90deg, #208A5B 0%, #00693A 100%);
            color: #fff;
        }
    }
}

.topBg {
    /deep/.nav {
        // background: #3C6BEA;
    }
}
</style>